<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
  <div class="execution">
    <basic-container>
      <h2 class="io-goods-detail">
        基础信息
      </h2>
      <el-row class="io-goods-detail basic-information">
        <el-col :span="6">
          <div class="grid-content bg-purple">退货单号:{{basicInformation.returnSn}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">审核状态:{{basicInformation.checkStatus}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">采购类型:采购计划</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light"></div>
          供应商名称:{{basicInformation.returnCustomer}}
        </el-col>
      </el-row>
      <el-row class="io-goods-detail basic-information">
        <el-col :span="6">
          <div class="grid-content bg-purple">原采购单号:{{basicInformation.orderSn}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">配送日期:{{basicInformation.createDate}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <template v-if="isEdit">
              <div style="float: left;line-height: 36px;margin-right: 15px">备注:</div><el-input style="float: left;width: 280px" v-model="basicInformation.remarks" />
            </template>
            <template v-else>{{basicInformation.remarks}}</template>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
          制单人:{{basicInformation.makeBill}}
        </el-col>
      </el-row>
    </basic-container>
    <basic-container>
      <h2 class="io-goods-detail">
        采购退货清单
      </h2>
      <el-table
        :data="tableData"
        style="width: 100%"
        :summary-method="getSummaries"
        show-summary
        :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column
          label="序号"
          prop="id"
          align="center"
          type="index">
        </el-table-column>
        <el-table-column
          label="商品图片"
          align="center">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImg" height="50px"/>
          </template>
        </el-table-column>
        <el-table-column
          label="商品"
          prop="goodsName"
          align="center">
        </el-table-column>
        <el-table-column
          label="单位"
          prop="unit"
          align="center">
        </el-table-column>
        <el-table-column
          label="收货单价"
          prop="goodsPrice"
          align="center">
        </el-table-column>
        <el-table-column
          label="退货数量"
          prop="goodsNum"
          align="center">
          <template slot-scope="scope">
            <el-input v-enter-number type="number" oninput="if(value.length>8)value=value.slice(0,8)" v-model="scope.row.goodsNum" />
          </template>
        </el-table-column>
        <el-table-column
          label="退款小计"
          prop="goodsAmount"
          align="center">
        </el-table-column>
        <el-table-column
          label="备注"
          prop="desc"
          align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" />
          </template>
        </el-table-column>
        <template>
          <el-table-column
            label="操作"
            align="center">
            <!--@click="handleClick(scope.row)"-->
            <template slot-scope="scope">
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div style="overflow: hidden;margin-top: 20px;">
        <el-row type="flex"  style="float: left;">
          <el-col :span="24">
            <div>
              <h3 style="width: 200px;float:left">其它费用:{{basicInformation.otherAmount}}</h3>
            </div>
          </el-col>
        </el-row>
        <h3 class="settle-accounts" style="float: right">合计退货金额:{{totalBackAmount}}</h3>
      </div>
      <div class="return-btn">
        <template v-if="isEdit">
          <el-button type="primary" plain @click="keep">保存</el-button>
        </template>
        <el-button type="primary" plain @click="close">返回</el-button>
      </div>
    </basic-container>
  </div>
</template>
<!-- 采购退货 -->
<script>
  import {mapGetters} from 'vuex'
  import {
    fetchList,
    getObj,
    putObj,
    getSendDeatil,
    editSend
  } from '@/api/scm/purchase/send_back'
  import {
    tableOption
  } from '@/const/crud/scm/purchase/send_back'
  import Util from '@/util/pds/utils';
  let cookieUtil = new Util();
  export default {
    name: 'purchase_send_back',
    data() {
      return {
        // 表格
        tableData: [],
        totalBackAmount: 0,
        basicInformation: {
          purchaseOrderId: '',
          checkStatus: '',
          purchaseType: '',
          supplierName: '',
          deliveryTime: '',
          purchaseEmployee: '',
          makeBill: '',
          otherMoney: 0
        },
        // 是否编辑
        isEdit: true,
        delDetails:[]
      }
    },
    computed: {
      ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
      tagLen() {
        return this.tagList.length || 0
      }
    },
    created(){
      this.init();
    },
    methods: {

      // 数据初始化
      init(){
        let params = JSON.parse(this.$route.query.res);
        getSendDeatil(params).then(response => {
          this.basicInformation = response.data.data;
          this.tableData = this.basicInformation.detailList;
          let totalBackAmount = 0;
          totalBackAmount = this.basicInformation.sumAmount + this.basicInformation.otherAmount;
          this.totalBackAmount = totalBackAmount.toFixed(2);
        })
      },
      //移除
      deleteRow(index, rows){
        this.delDetails.push(rows[index]);
        this.tableData.splice(index, 1);
        this.totalBackAmount = 0;
        this.tableData.forEach(item=>{
          this.totalBackAmount += item.goodsPrice*item.goodsNum;
        })
      },
      // 数据合计
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(index !== 4 && index !== 6){
            sums[index] = '';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index].toFixed(2);
          } else {
            sums[index] = 'N/A';
          }
        });
        return sums;
      },
      keep(){
        if(this.returnReason == ''){
          this.$message({
            showClose: true,
            message: '请输入退货原因',
            type: 'error'
          })
          return false;
        }
        this.basicInformation.editDetails = this.basicInformation.detailList;
        this.basicInformation.delDetails = this.delDetails;
        this.basicInformation.addDetails = [];
        let params = this.basicInformation;
        editSend(params).then(res=>{
          if(res.code=200){
            this.$message.success("退货单编辑成功");
            let _this = this;
            setTimeout(function () {
              _this.close();
            },2000)
          }else{
            this.$message.error("退货单编辑失败")
          }
        });
      },
      close(){
        var str_before = location.href.split('#')[1];
        let { tag, key } = this.findTag(str_before);
        this.$store.commit('DEL_TAG', tag);
        this.$router.go(-1);
      },
      findTag(value) {
        let tag, key
        this.tagList.map((item, index) => {
          if (item.value === value) {
            tag = item
            key = index
          }
        })
        return { tag: tag, key: key }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .io-goods-detail {
    margin-bottom: 10px;
  }

  .settle-accounts {
    text-align: right;
  }

  .basic-information {
    margin-top: 20px;
    font-weight: inherit;
  }

  .return-btn {
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
  }
</style>
